<template>
  <div>
    <h1>{{ name }}--{{ score }}</h1>
    <button @click="handleScore">按钮</button>
    <h1>{{ status }}</h1>
    <input ref="myInput" type="text" placeholder="自动获取焦点" />
    <button @click="handleLog">触发全局挂载的方法</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    name: String,
    score: {
      type: Number,
      required: true,
    },
  },
  emits: {
    "change-score": (payload: number) => {}, //约定emits格式
  },
  methods: {
    handleScore(ev: Event) {
      this.$emit("change-score", 10); //按照emits约定的格式，触发$emits
      console.log(ev.target);
    },
    handleLog() {
      this.$myLog(); //在组件内，调用main.ts中挂载的全局方法
    },
  },
  computed: {
    status(): string {
      return this.score >= 60 ? "及格" : "不及格";
    },
  },
  mounted() {
    console.log(this.$refs.myInput);
    (this.$refs.myInput as HTMLInputElement).focus();
  },
});
</script>

<style scoped></style>
